🎨

ORIENTASI FULL-STACK & DEVELOPER ECOSYSTEM

Tailwind CSS
Advanced UI

Bangun Dashboard Profesional ✦

📦 BAB 3⚡ 18 Slide 🧩 3 Latihan🎯 Kelas 10

Tekan → atau klik tombol untuk mulai

🗺️ Roadmap BAB 3

Perjalanan dari konsep dasar hingga membangun Admin Dashboard.

📐

Layout Core

Flexbox & Grid

🧱

Komponen

Card, Sidebar, Navbar, Modal

✨

UX Pattern

Form, Loading, Empty State

🚀

Mini Project

Admin Dashboard UI

🎯 Capaian Pembelajaran

✅ Memahami Flexbox & Grid secara visual
✅ Membuat komponen UI dengan state interaktif
✅ Menyusun arsitektur layout dashboard
✅ Membangun Admin Dashboard UI profesional

Layout Core

📏 Flexbox Fundamentals

Sistem tata letak 1 dimensi — menyusun elemen dalam satu garis: baris (mendatar) ATAU kolom (menurun).

🧠 Analogi Sederhana

Bayangkan kamu menata buku berdiri di atas rak. Semua buku berbaris dalam satu garis. Kamu bisa atur: apakah buku didorong ke kiri, ke tengah, ke kanan, atau diberi jarak merata. Kamu juga bisa atur apakah buku rata bagian atas atau bawahnya. Itulah Flexbox — kamu mengatur sekumpulan elemen yang berbaris dalam satu garis.

📐 Konsep Inti: Dua Sumbu (Axis)

Flexbox bekerja dengan 2 arah. Memahami ini = kunci agar tidak bingung:

➡️ Main Axis (Sumbu Utama)

Arah utama elemen berbaris. Diatur oleh justify-content. Default = mendatar (kiri→kanan).

⬆️ Cross Axis (Sumbu Silang)

Arah tegak lurus dari sumbu utama. Diatur oleh items-*. Default = vertikal (atas→bawah).

🔬 Live demo — klik tombol, perhatikan posisi kotak berubah di sumbu utama:

1

2

3

<!-- "flex" mengubah div jadi flex container -->
<div class="flex justify-center items-center gap-3">
  <div class="w-12 h-12 bg-indigo-500"></div>
  <div class="w-12 h-12 bg-cyan-400"></div>
</div>

🔧 Bedah Class Penting (apa fungsinya satu per satu)

Class Tailwind	Fungsi
`flex`	Mengaktifkan Flexbox pada elemen (jadi "flex container")
`flex-row` / `flex-col`	Arah berbaris: mendatar (default) atau menurun
`justify-start/center/between`	Atur posisi di sumbu utama (kiri ↔ kanan)
`items-start/center/end`	Atur posisi di sumbu silang (atas ↔ bawah)
`gap-3`	Jarak antar elemen (lebih rapi daripada margin)
`flex-1`	Membuat elemen melebar mengisi sisa ruang kosong
`flex-wrap`	Elemen turun ke baris baru jika ruang habis (anti berdesakan)

✅ Kapan Dipakai

Navbar (logo kiri, menu kanan)
Toolbar & deretan tombol
Menengahkan elemen (center)
Daftar item horizontal

⚠️ Kesalahan Umum

Lupa flex → justify-* tidak berefek
Tertukar justify vs items
Pakai margin manual padahal ada gap

💎 Best Practice

Gunakan gap, bukan margin
Pakai Flexbox untuk layout 1 arah saja
Butuh 2 arah? → pakai Grid (slide berikutnya)

Layout Core

🔲 CSS Grid & Perbandingannya

Sistem tata letak 2 dimensi — mengatur baris DAN kolom secara bersamaan. Cocok untuk struktur halaman penuh.

🧠 Analogi Sederhana

Kalau Flexbox seperti menata buku dalam satu baris, maka Grid seperti papan catur atau kotak-kotak di buku tulis matematika. Kamu menentukan dulu: "saya mau 3 kolom dan 2 baris", lalu menaruh elemen ke dalam kotak-kotak itu. Satu elemen bahkan bisa menempati 2 kotak sekaligus (merge). Grid memikirkan layout dulu, baru kontennya.

📐 Konsep Inti Grid

Columns & Rows

Kamu tentukan jumlah kolom (grid-cols-3) dan baris. Grid otomatis membuat "sel".

Spanning

Satu elemen bisa membentang beberapa kolom (col-span-2) atau baris (row-span-2).

Gap

Jarak antar sel diatur rapi sekaligus dengan gap-4.

🔬 Visual grid-cols-3 — perhatikan kotak pertama membentang 2 kolom:

header (span 2)

side

a

b

c

<!-- grid + grid-cols-3 = 3 kolom sama lebar -->
<div class="grid grid-cols-3 gap-2">
  <!-- col-span-2 = lebar 2 kolom -->
  <div class="col-span-2">header</div>
  <div>sidebar</div>
</div>

🔧 Bedah Class Penting

Class	Fungsi
`grid`	Mengaktifkan CSS Grid pada elemen
`grid-cols-3`	Membuat 3 kolom dengan lebar sama
`col-span-2`	Elemen membentang selebar 2 kolom
`row-span-2`	Elemen membentang setinggi 2 baris
`gap-4`	Jarak antar sel grid
`md:grid-cols-3`	3 kolom HANYA di layar sedang ke atas (responsif)

⚖️ Flexbox vs Grid — Kapan Pakai yang Mana?

Aspek	Flexbox	Grid
Dimensi	1 arah (baris / kolom)	2 arah (baris & kolom)
Cara berpikir	Konten dulu	Layout dulu
Contoh ideal	Navbar, list, tombol	Halaman penuh, dashboard, galeri
Aturan praktis	1 baris/kolom → Flexbox. Struktur kotak-kotak → Grid. Sering dipakai bareng!

Komponen • 3D

🃏 Card Design Patterns

Card (kartu) = wadah persegi untuk mengelompokkan informasi yang saling berkaitan agar mudah dibaca.

🧠 Analogi & Konsep "State"

Card itu seperti kartu nama atau kartu menu makanan — satu kotak berisi gambar, judul, deskripsi, dan tombol. Di web modern, satu card bisa punya beberapa "state" (kondisi tampilan) tergantung interaksi pengguna:

Default — tampilan diam, belum disentuh.

Hover — saat kursor di atasnya (membesar/berputar).

Active/Focus — saat diklik atau dipilih (glow/ring).

🔬 Arahkan kursor ke kartu tengah → efek 3D flip:

🟦

Default State

Padding, sudut membulat (rounded), bayangan (shadow). Tenang, belum ada interaksi.

🔄

Hover Me

flip 3D

rotateY(180deg)

backface-visibility: hidden

⚡

Active / Glow

State aktif: ring + shadow glow menandakan kartu terpilih.

🔧 Anatomi Card & Class-nya

Class	Fungsi
`rounded-2xl`	Sudut membulat
`p-6`	Jarak isi ke tepi (padding)
`shadow-xl`	Bayangan, kesan "mengambang"
`hover:scale-105`	Membesar 5% saat hover
`transition`	Membuat perubahan halus, bukan patah

💡 Rahasia efek 3D flip:

perspective → memberi "kedalaman" ruang 3D
rotateY(180deg) → memutar kartu seperti membalik koin
backface-visibility:hidden → menyembunyikan sisi belakang agar tidak tembus

<!-- Card lengkap dengan hover effect -->
<div class="rounded-2xl bg-gray-900 p-6 shadow-xl hover:scale-105 transition">
  <h3 class="font-bold text-lg">Judul Kartu</h3>
  <p class="text-gray-400 text-sm">Deskripsi singkat...</p>
</div>

Arsitektur

🏗️ Dashboard Layout Architecture

Dashboard = halaman kontrol tempat admin melihat & mengelola data. Hampir semua dashboard memakai pola layout yang sama.

🧠 Analogi: Ruang Kerja Kantor

Bayangkan sebuah kantor. Ada papan menu di dinding kiri (Sidebar) untuk pindah ruangan, ada papan info di atas pintu (Navbar) berisi nama & notifikasi, dan meja kerja utama di tengah (Content) tempat semua pekerjaan terjadi. Pola 3 bagian ini muncul di hampir semua aplikasi: Gmail, YouTube Studio, Spotify, dashboard admin — semua mirip!

Sidebar
navigasi menu

Navbar — search, profil, notifikasi

Content Area
(Stat Cards, Charts, Tables)

📚 Sidebar

Menu navigasi tetap di kiri. Untuk pindah antar halaman (Dashboard, Users, Settings).

🧭 Navbar

Bar atas. Berisi pencarian, profil pengguna, notifikasi. Biasanya sticky (menempel saat scroll).

🖥️ Content

Area terbesar. Tempat data ditampilkan — bagian yang paling sering berubah.

🔧 Cara Membangunnya dengan Grid

<!-- grid-cols: kolom 170px (sidebar) + sisanya (1fr) -->
<div class="grid grid-cols-[170px_1fr] grid-rows-[56px_1fr] h-screen">
  <aside class="row-span-2">Sidebar</aside>
  <header>Navbar</header>
  <main>Content</main>
</div>

Penjelasan: [170px_1fr] artinya kolom pertama selebar 170px (sidebar), kolom kedua mengisi sisa ruang (1fr = 1 fraction). row-span-2 membuat sidebar memanjang dari atas sampai bawah. h-screen = tinggi penuh layar.

Komponen

📚 Sidebar Collapsible

Sidebar = panel menu navigasi di sisi kiri. Collapsible = bisa dikecilkan agar konten utama lebih luas.

🧠 Kenapa Harus Bisa Collapse?

Bayangkan laci dapur: saat dibutuhkan kamu buka lebar (lihat semua isinya), saat tidak kamu tutup agar tidak makan tempat. Sidebar juga begitu — di layar lebar tampil penuh dengan teks menu, tapi saat butuh fokus ke konten (atau di layar kecil) bisa dikecilkan jadi hanya ikon. Ini pola standar di Gmail, VS Code, Notion.

🔬 Klik tombol untuk collapse / expand:

Konten utama jadi lebih luas →

<!-- lebar berubah lewat JavaScript -->
<nav class="transition-all duration-500"
     id="sidebar">
  <span>🏠 <span class="label">Dashboard</span></span>
</nav>

// JS: saat diklik, ubah lebar + sembunyikan label
function toggle() {
  sidebar.style.width = collapsed ? '160px' : '52px';
}

🔑 Kunci Teknik

transition-all duration-500 bikin gerakan halus
Saat collapse, sembunyikan teks, sisakan ikon

✅ Tips UX

Ikon harus tetap jelas tanpa teks
Beri tooltip saat hover ikon (opsional)

⚠️ Hindari

Jangan hilangkan sidebar total (user bingung)
Jangan lupa overflow-hidden saat menyempit

Komponen

🧭 Navbar + Dropdown

Navbar (navigation bar) = bar di bagian atas halaman berisi brand, menu, dan aksi pengguna.

🧠 Analogi: Papan Nama Toko

Navbar itu seperti bagian depan toko: ada logo/nama toko di kiri, dan petunjuk arah di kanan (kasir, toilet, keluar). Pola umum: brand di kiri, menu & profil di kanan — dipisah dengan justify-between. Dropdown adalah menu yang muncul saat diklik, untuk menghemat ruang (menyembunyikan opsi Profile/Logout sampai dibutuhkan).

🔬 Klik "Menu ▾" untuk membuka dropdown:

🟣 Brand

Home About

👤 Profile

💳 Billing

🚪 Logout

🔧 Class Kunci Navbar

`flex`	Menyusun isi navbar sebaris
`justify-between`	Brand mentok kiri, menu mentok kanan
`items-center`	Semua sejajar di tengah vertikal
`sticky top-0`	Navbar menempel di atas saat scroll
`hidden sm:inline`	Sembunyikan menu di HP, tampil di layar besar

<header class="flex items-center justify-between
  p-3 bg-gray-900 sticky top-0">
  <div>🟣 Brand</div>
  <nav class="flex gap-4">
    <a>Home</a> <a>About</a>
  </nav>
</header>

💡 Cara kerja dropdown: menu disembunyikan dengan opacity:0 + pointer-events:none. Saat tombol diklik, JavaScript mengubahnya jadi opacity:1 + scale(1) sehingga muncul dengan animasi mengembang. Posisinya pakai absolute agar mengambang di atas konten lain.

Komponen

🪟 Modal / Overlay

Modal = kotak dialog yang muncul di atas seluruh halaman untuk meminta perhatian penuh pengguna.

🧠 Analogi & Kapan Dipakai

Modal seperti petugas yang menghampiri dan berkata "tunggu sebentar, konfirmasi dulu" sebelum kamu lanjut. Latar belakang diredupkan (overlay/backdrop) supaya fokus tertuju ke dialog. Dipakai untuk:

⚠️ Konfirmasi hapus data

📝 Form tambah/edit cepat

🔐 Login / pesan penting

<!-- 1. Overlay menutupi seluruh layar -->
<div class="fixed inset-0 bg-black/60
  grid place-items-center z-50">
  <!-- 2. Kotak dialog di tengah -->
  <div class="bg-gray-900 rounded-2xl p-6">
    Isi modal...
  </div>
</div>

🔧 Bedah Konsep

fixed inset-0 → menutup seluruh layar (overlay)
bg-black/60 → latar gelap transparan 60%
grid place-items-center → kotak otomatis di tengah
z-50 → tampil paling depan
Animasi: dari translateY(40px) opacity:0 → naik & muncul

💎 Best practice: klik area gelap atau tombol "Tutup" harus bisa menutup modal.

UX Pattern

📝 Form Design & Validation

Form = tempat pengguna mengisi data (login, daftar, dll). Validation = pengecekan apakah isian sudah benar.

🧠 Kenapa Validasi & Feedback Penting?

Bayangkan mengisi formulir kertas, lalu baru tahu salah setelah diserahkan — menyebalkan, kan? Form web yang baik memberi feedback langsung: border berubah hijau jika benar, merah jika salah, plus pesan jelas. Ini membuat form terasa hidup dan accessible (mudah dipakai semua orang).

🔬 Ketik email lalu klik Cek — perhatikan perubahan border & pesan:

Email

Masukkan email yang valid.

<input class="border border-white/15
  focus:ring-2 focus:ring-cyan-400
  focus:border-cyan-400 transition" />

// State berdasarkan hasil validasi:
// valid -> border-emerald-500
// error -> border-red-500 + pesan

🔧 State Penting Input

focus: saat diklik/aktif
ring = cincin highlight
warna border = penanda valid/error

✅ Form yang Baik

Selalu ada <label>
Placeholder sebagai contoh
Pesan error spesifik & ramah

⚠️ Hindari

Error hanya warna (buta warna!)
Pesan samar "input salah"
Tanpa indikasi field wajib

UX Pattern

⏳ Loading State & Skeleton

Loading state = tampilan saat data sedang dimuat dari server. Tujuannya: pengguna tahu aplikasi bekerja, bukan macet.

🧠 Analogi: Menunggu Pesanan

Saat pesan makanan, pelayan bilang "ditunggu ya, sedang dimasak". Tanpa itu, kamu bingung apakah pesananmu diterima. Layar kosong tanpa loading = pengguna mengira aplikasi error/hang. Ada 3 gaya umum, masing-masing untuk situasi berbeda 👇

① Skeleton

Kerangka abu-abu meniru bentuk konten asli. Terbaik — terasa cepat.

② Spinner

Lingkaran berputar. Untuk loading singkat / tombol.

③ Progress Bar

Menunjukkan progres (70%). Untuk upload / proses panjang.

🔧 Cara Buat Skeleton (cara termudah)

<!-- animate-pulse = efek berkedip pelan bawaan Tailwind -->
<div class="animate-pulse bg-gray-700 h-24 rounded-lg"></div>
<div class="animate-pulse bg-gray-700 h-3 w-3/4 rounded mt-3"></div>

💎 Aturan praktis: loading < 1 detik → spinner. Memuat kartu/daftar → skeleton. Upload file → progress bar.

UX Pattern

📭 Empty State Design

Empty state = tampilan saat belum ada data (daftar kosong, hasil pencarian nihil, inbox bersih).

🧠 Kenapa Tidak Boleh Dibiarkan Kosong?

Layar kosong polos membuat pengguna bingung: "Apakah error? Apa yang harus saya lakukan?" Empty state yang baik mengubah kebingungan jadi arahan. Rumusnya: Ilustrasi ramah + pesan jelas + tombol aksi (CTA) yang memberi tahu langkah berikutnya.

Belum ada data 🗂️

Mulai dengan menambahkan item pertamamu.

🔧 3 Bahan Wajib Empty State

1. Ilustrasi/Ikon

SVG atau emoji yang ramah, tidak menakutkan. Hindari ikon error merah.

2. Pesan Jelas

Jelaskan kondisi + nada positif. "Belum ada data" lebih baik daripada "Kosong".

3. Call To Action (CTA)

Tombol yang memberi langkah jelas: "+ Tambah Data", "Mulai Sekarang".

⚠️ Hindari: layar putih polos tanpa petunjuk apa pun.

Dashboard

📊 Dashboard Analytics UI

Analytics UI = bagian dashboard yang menampilkan angka & grafik agar data mudah dipahami sekilas.

🧠 Kenapa Pakai Grafik, Bukan Tabel Angka?

Otak manusia membaca bentuk visual jauh lebih cepat daripada deretan angka. "Penjualan naik" lebih instan terlihat dari batang grafik yang meninggi daripada membaca tabel. Dua elemen utama: Stat Card (satu angka penting + label) dan Chart (perbandingan/tren). Hebatnya, grafik sederhana bisa dibuat tanpa library — cukup CSS!

🔬 Stat cards di bawah — angkanya menghitung naik otomatis (counter animation):

Users

0

Revenue

0

Orders

0

Visits

0

📈 Penjualan / Bulan (bar chart tumbuh saat slide muncul)

Jan

Feb

Mar

Apr

Mei

🔧 Rahasia Bar Chart Tanpa Library

<!-- Tiap batang hanyalah div dengan tinggi (height) berbeda -->
<div class="flex items-end gap-3 h-40">
  <div class="flex-1 bg-cyan-400" style="height:60%"></div>
  <div class="flex-1 bg-cyan-400" style="height:90%"></div>
</div>

Kuncinya: items-end membuat batang tumbuh dari bawah, flex-1 membagi lebar rata, dan tinggi (height:%) merepresentasikan nilai data. Animasi naik dibuat dengan transition pada height. Counter angka dibuat dengan sedikit JavaScript (menambah nilai bertahap).

Mini Project

🧩 Mini Project Overview

Semua komponen yang dipelajari digabung menjadi satu Admin Dashboard UI.

📚

Sidebar

Navigasi collapsible

🧭

Navbar

Search + profil dropdown

📊

Stat Cards

4 metrik utama

📈

Chart

Bar chart CSS

📋

Data Table

Daftar transaksi

🃏

Cards

Hover effect

Live Preview

🚀 Demo: Admin Dashboard UI

🔔S

Users

1.2K

Sales

$8.9K

Orders

356

Growth

+12%

Chart

Transaksi

#001 Budi✓ $20

#002 Ani⏳ $35

#003 Citra✓ $12

⬆️ Inilah target akhir BAB 3 — kamu akan membangun ini sendiri!

🎯 LATIHAN 1 • Level: Mudah

Buat Responsive Card Grid

📋 Deskripsi

Buat galeri 6 kartu produk yang tersusun rapi menggunakan Grid + Flexbox.

🔧 Tools

Tailwind CSS + HTML

📝 Langkah

Buat container grid grid-cols-1 md:grid-cols-3 gap-4
Isi 6 card berisi judul, gambar emoji, harga
Tambahkan hover:scale-105 transition
Gunakan Flexbox di dalam card untuk align tombol

🖥️ Expected Output

3 kolom di desktop, 1 kolom di mobile, kartu naik saat di-hover.

⭐ Kriteria Penilaian

☑️ Responsif (mobile & desktop)
☑️ Styling konsisten antar kartu
☑️ Ada hover effect
☑️ Spacing rapi (gap & padding)

⏱️ Estimasi: 30–45 menit

🎯 LATIHAN 2 • Level: Menengah

Sidebar + Navbar dengan Toggle Collapse

📋 Deskripsi

Buat layout dashboard dengan sticky sidebar yang bisa di-collapse + navbar atas.

🔧 Tools

Tailwind CSS + HTML + sedikit JS

📝 Langkah

Buat grid 2 kolom: sidebar + content
Sidebar isi ikon + label menu
Tambahkan tombol toggle yang mengubah lebar sidebar
Sembunyikan label saat collapsed (sisakan ikon)
Tambahkan navbar dengan sticky top-0

🖥️ Expected Output

Sidebar lebar↔sempit dengan transisi halus, navbar tetap menempel saat scroll.

⭐ Kriteria Penilaian

☑️ Toggle collapse berfungsi
☑️ Transisi animasi halus
☑️ Navbar sticky
☑️ Layout tidak rusak saat collapse

⏱️ Estimasi: 60–90 menit

🏆 TUGAS AKHIR BAB • Level: Menantang

Bangun Admin Dashboard UI Lengkap

📋 Deskripsi

Gabungkan semua komponen BAB 3 menjadi satu Admin Dashboard utuh.

📝 Komponen Wajib

📚 Sidebar collapsible
🧭 Navbar + search + profil dropdown
📊 4 stat cards (counter)
📈 Bar chart pure CSS
📋 Data table transaksi
🃏 Card dengan hover effect

🖥️ Expected Output

Dashboard profesional, responsif, dengan animasi & interaktivitas dasar.

⭐ Kriteria Penilaian (100 poin)

☑️ Layout lengkap & rapi (30)
☑️ Semua komponen ada (30)
☑️ Responsif (15)
☑️ Animasi / interaktivitas (15)
☑️ Kerapian kode (10)

⏱️ Estimasi: 3–5 jam • 🎉 Selamat menyelesaikan BAB 3!

Tailwind CSSAdvanced UI

🗺️ Roadmap BAB 3

Layout Core

Komponen

UX Pattern

Mini Project

🎯 Capaian Pembelajaran

📏 Flexbox Fundamentals

🔲 CSS Grid & Perbandingannya

🃏 Card Design Patterns

Default State

Hover Me

rotateY(180deg)

Active / Glow

🏗️ Dashboard Layout Architecture

📚 Sidebar Collapsible

🧭 Navbar + Dropdown

🪟 Modal / Overlay

📝 Form Design & Validation

⏳ Loading State & Skeleton

📭 Empty State Design

Belum ada data 🗂️

📊 Dashboard Analytics UI

🧩 Mini Project Overview

Sidebar

Navbar

Stat Cards

Chart

Data Table

Cards

🚀 Demo: Admin Dashboard UI

Buat Responsive Card Grid

Sidebar + Navbar dengan Toggle Collapse

Bangun Admin Dashboard UI Lengkap

Modal Berhasil Dibuka!

Tailwind CSS
Advanced UI